<!-- links -->
<template>
  <div>
    <div class="flex justify-center bg-main">
      <div class="width-main padding-tb margin-tb">
        <h3 class="margin-bottom"><span class="title-link">申请友接</span></h3>
        <p>欢迎交换友情链接, 请留言告诉我你的一下信息</p>
        <p>优先考虑原创内容的博客或网站哦</p>
        <div class="describe">
          <p>网站名称：树街猫UP</p>
          <p>网站简介：爱吃土豆喜欢猫</p>
          <p>头像地址：http://q1.qlogo.cn/g?b=qq&nk=2841175342&s=640</p>
          <p>网站地址：www.rinvay.net</p>
        </div>
        <h3 class="margin-bottom"><span class="title-links">友情链接</span></h3>
        <div class="flex flex-wrap">
          <div class="link-father" v-for="(item, index) in links" :key="index">
            <a class="link-item" href="https://www.baidu.com" target="_blank">
              <div class="avatar">
                <img :src="item.avatar" alt="" />
              </div>
              <div>
                <p class="text-line">
                  <strong>{{ item.name }}</strong>
                </p>
                <p class="text-line">{{ item.describe }}</p>
              </div>
            </a>
          </div>
        </div>
        <!-- pagination -->
        <Pagination
          :total="count"
          :limit="form.limit"
          @currentChange="handlePageChange"
        ></Pagination>
      </div>
    </div>
    <Comment></Comment>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index";
import { demoLinkList } from "@/api/link";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      form: {
        page: 1,
        limit: 6,
        is_demo: 0,
      },
      count: 0,
      links: [],
    };
  },
  mounted() {
    this.handleLoadData();
  },
  methods: {
    handleLoadData() {
      demoLinkList(this.form).then((res) => {
        console.log(res.data);
        this.links = res.data.data;
        this.count = res.data.count;
      });
    },
    handlePageChange(page) {
      this.form.page = page;
      this.handleLoadData();
    },
  },
};
</script>
<style lang='scss' scoped>
.link-father {
  width: 33%;
  padding: 10px;
}
.link-item {
  padding: 15px;
  display: block;
  background: rgba($color: #f0efea, $alpha: 1);
  box-shadow: 1px 1px 1px #d9d2be, -1px -1px 1px #ffffff;
  transition: all 0.5s;
  &:hover {
    box-shadow: 2px 2px 3px #cac1a7, -2px -2px 3px #ffffff;
  }
  .avatar {
    float: left;
    margin-right: 12px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #fff;
    overflow: hidden;
    transition: all 1s;
    &:hover {
      transform: rotate(360deg);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
p {
  text-shadow: 1px 1px 1px #fff;
}
.describe {
  font-size: 0.9rem;
  color: #333;
  padding: 20px 30px;
  display: inline-block;
  width: 100%;
  background-color: rgba($color: #fff, $alpha: 0.6);
  border-radius: 4px;
  box-shadow: inset 1px 1px 1px #e0d8c3, inset -1px -1px 1px #ffffff;
}
.title-links {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  margin: 50px 0 20px;
  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "🔗";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.title-link {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  margin: 0 0 0.4rem;
  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "🈸";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>